<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户车辆管理</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/userCar/list.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <header>
            <h1>
                <i class="fas fa-car"></i>
                车辆管理
            </h1>
            <div class="user-info">
                欢迎，{{ userInfo.userName }}
                <a href="javascript:void(0)" @click="handleLogout">
                    <i class="fas fa-sign-out-alt"></i>
                    退出
                </a>
            </div>
        </header>

        <nav>
            <ul>
                <li><a href="../../index.html">返回首页</a></li>
            </ul>
        </nav>

        <main>
            <!-- 统计卡片 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-car"></i></div>
                    <div class="stat-info">
                        <h3>总车辆数</h3>
                        <p>{{ stats.total }}</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                    <div class="stat-info">
                        <h3>普通车辆</h3>
                        <p>{{ stats.normal }}</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-crown"></i></div>
                    <div class="stat-info">
                        <h3>VIP车辆</h3>
                        <p>{{ stats.vip }}</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-clock"></i></div>
                    <div class="stat-info">
                        <h3>临时车辆</h3>
                        <p>{{ stats.temp }}</p>
                    </div>
                </div>
            </div>

            <!-- 操作栏 -->
            <div class="action-bar">
                <button class="btn btn-primary" @click="showAddForm">
                    <i class="fas fa-plus"></i> 添加车辆
                </button>
                <div class="search-box">
                    <input type="text" v-model="searchKey" placeholder="搜索车牌号...">
                    <button @click="handleSearch">
                        <i class="fas fa-search"></i>搜索
                    </button>
                </div>
            </div>

            <!-- 车辆列表 -->
            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>车牌号</th>
                            <th>车辆品牌</th>
                            <th>车型</th>
                            <th>颜色</th>
                            <th>车位编号</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="car in userCars" :key="car.carId">
                            <td>{{ car.userId }}</td>
                            <td>{{ car.carNumber }}</td>
                            <td>{{ car.carBrand }}</td>
                            <td>{{ car.carModel }}</td>
                            <td>{{ car.carColor }}</td>
                            <td>{{car.seatNum}}</td>
                            <td>{{ getCarType(car.carType)}}</td>
                            <td>
                                <span :class="['status-tag', getStatusClass(car.status)]">
                                    {{ getStatusText(car.status) }}
                                </span>
                            </td>
                            <td>
                                <div class="action-group">
                                    <button class="btn btn-edit" @click="showEditForm(car)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-delete" @click="deleteCar(car.carId)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 添加/编辑车辆弹窗 -->
            <div class="modal" v-if="showModal">
                <div class="modal-content">
                    <h3>{{ isEdit ? '编辑车辆' : '添加车辆' }}</h3>
                    <form @submit.prevent="submitForm">
                        <div class="form-group">
                            <label for="carNumber">用户ID：</label>
                            <input type="text" id="userId" v-model="form.userId" required>
                        </div>
                        <div class="form-group">
                            <label for="carNumber">车牌号：</label>
                            <input type="text" id="carNumber" v-model="form.carNumber" required>
                        </div>
                        <div class="form-group">
                            <label for="carBrand">车辆品牌：</label>
                            <input type="text" id="carBrand" v-model="form.carBrand" required>
                        </div>
                        <div class="form-group">
                            <label for="carModel">车型：</label>
                            <input type="text" id="carModel" v-model="form.carModel" required>
                        </div>
                        <div class="form-group">
                            <label for="carColor">颜色：</label>
                            <input type="text" id="carColor" v-model="form.carColor" required>
                        </div>
                        <div class="form-group">
                            <label for="seatNum">车位编号：</label>
                            <select id="seatNum" v-model="form.seatNum" required>
                                <option v-for="seat in availableSeats" :key="seat.seatNum" :value="seat.seatNum" required>
                                    {{ seat.seatNum }}
                                </option>
                                <option v-if="availableSeats.length === 0" disabled>车位已满</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="status">状态：</label>
                            <select id="status" v-model="form.status" required>
                                <option value="0">正常</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                        <div class="form-buttons">
                            <button type="submit" class="btn btn-primary">保存</button>
                            <button type="button" class="btn btn-cancel" @click="closeModal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../js/userCar/list.js"></script>
</body>
</html> 